
  
<template> 
<div style="padding:30px">
  <el-row type="flex" class="row-bg" justify="center">
    <el-col  :xs="24" :sm="20" :md="20" :lg="13" >
 
    <el-steps style="padding:30px" :active="active" finish-status="success" align-center>
      <el-step title="填写图书ISBN"></el-step>
      <el-step title="确定对应图书信息"></el-step>
      <el-step title="填写图书商品属性"></el-step>
      <el-step title="确认提交"></el-step>
     
    </el-steps>
    <product-info-detail
  
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep">
    </product-info-detail>
    <product-sale-detail
   
      v-show="showStatus[1]"
      :isbn='ISBN'
      :active="active"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep">
    </product-sale-detail>
    <product-attr-detail
      v-show="showStatus[2]"
     :book='this.book_1'
      :active="active"
      :num='this.table'
      @nextStep="nextStep"
      @prevStep="prevStep">
    </product-attr-detail>
    <product-relation-detail
      v-show="showStatus[3]"
      :active="active"
       :book='this.book'
       :fenlei='this.fenlei'
      :is-edit="isEdit"
      @prevStep="prevStep"
      @finishCommit="finishCommit">
    </product-relation-detail>

     
    </el-col>
  </el-row>
  </div>
</template>
<script>
  import ProductInfoDetail from './components/addisbn';
  import ProductSaleDetail from './components/book_xq';
  import ProductAttrDetail from './components/book_attributes';
  import ProductRelationDetail from './components/submit';
  
  // import {createProduct,getProduct,updateProduct} from '@/api/product';
 
  const defaultProductParam = {
    albumPics: '',
    brandId: null,
    brandName: '',
    deleteStatus: 0,
    description: '',
    detailDesc: '',
    detailHtml: '',
    detailMobileHtml: '',
    detailTitle: '',
    feightTemplateId: 0,
    flashPromotionCount: 0,
    flashPromotionId: 0,
    flashPromotionPrice: 0,
    flashPromotionSort: 0,
    giftPoint: 0,
    giftGrowth: 0,
    keywords: '',
    lowStock: 0,
    name: '',
    newStatus: 0,
    note: '',
    originalPrice: 0,
    pic: '',
    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
    memberPriceList: [],
    //商品满减
    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
    //商品阶梯价格
    productLadderList: [{count: 0,discount: 0,price: 0}],
    previewStatus: 0,
    price: 0,
    productAttributeCategoryId: null,
    //商品属性相关{productAttributeId: 0, value: ''}
    productAttributeValueList: [],
    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
    skuStockList: [],
    //商品相关专题{subjectId: 0}
    subjectProductRelationList: [],
    //商品相关优选{prefrenceAreaId: 0}
    prefrenceAreaProductRelationList: [],
    productCategoryId: null,
    productCategoryName: '',
    productSn: '',
    promotionEndTime: '',
    promotionPerLimit: 0,
    promotionPrice: null,
    promotionStartTime: '',
    promotionType: 0,
    publishStatus: 0,
    recommandStatus: 0,
    sale: 0,
    serviceIds: '',
    sort: 0,
    stock: 0,
    subTitle: '',
    unit: '',
    usePointLimit: 0,
    verifyStatus: 0,
    weight: 0
  };
  export default {
    name: 'ProductDetail',
    components: {ProductInfoDetail,ProductSaleDetail,ProductAttrDetail,ProductRelationDetail},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        ISBN:'',
        active: 0,
        productParam: Object.assign({}, defaultProductParam),
        showStatus: [true, false, false, false,false],
        booK_1:{},
        book:{
          name:'dsds',
          title:'sddsad'
        },
        fenlei:'',
        table:[],
      }
    },
    created(){
      if(this.isEdit){
        getProduct(this.$route.query.id).then(response=>{
          this.productParam=response.data;
        });
      }
    },
   
    methods: {
      hideAll() {
        for (let i = 0; i < this.showStatus.length; i++) {
          this.showStatus[i] = false;
        }
      },
      prevStep(val) {
        if (this.active > 0 && this.active < this.showStatus.length) {
          this.active--;
          this.hideAll();
          if(val!=''){
            console.log(val)
            this.table = val
          }
          this.showStatus[this.active] = true;
        }
      },
      nextStep(data,item) {
        console.log(this.active)

        if (this.active < this.showStatus.length - 1) {
          this.active++;
        
             this.hideAll();
          if(this.active==2){
            console.log('传图书信息');
            this.book_1=data
          }else if(this.active==1){
            if(data){
             this.ISBN=data;
            console.log(this.ISBN);
            
          }
          }else if(this.active==3){
            this.book=data
            console.log(item)
            this.fenlei=item[0].data
            console.log( this.fenlei)
            
          }
          
         
          this.showStatus[this.active] = true;
          
         
        }
      },
    
      finishCommit(isEdit) {
        this.$confirm('是否要提交该产品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(isEdit){
            updateProduct(this.$route.query.id,this.productParam).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              this.$router.back();
            });
          }else{
            createProduct(this.productParam).then(response=>{
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              location.reload();
            });
          }
        })
      }
    }
  }
</script>
<style>
  .form-container {
    width: 800px;
   
  }
</style>


